<template>
  <div style="height: 100%;">
    <el-container style="height: 100%;">
      <el-header>
        <img class="logo" src="../../../static/512.png" />
        <span class="name">麦粒儿后台管理</span>
      </el-header>
      <el-container>
        <el-aside width="150px">
          <div
            v-for="(item, index) in asideList"
            :key="index"
            class="aside-list"
            :class="{active: isActive === index}"
            @click="goPage(index)">{{item.name}}</div>
        </el-aside>
        <el-main
          v-loading="isLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.4)">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      asideList: [
        {
          name: '用户',
          route: '/index/person'
        },
        {
          name: '商品',
          route: '/index/goods'
        },
        {
          name: '订单',
          route: '/index/order'
        }
      ],
      isLoading: false,
      isActive: 0
    }
  },
  methods: {
    goPage (index) {
      this.isActive = index
      this.isLoading = true
      this.isLoading = false
      this.$router.push({
        path: this.asideList[index].route
      })
    }
  },
  created: function () {
    if (this.$route.name === 'person') {
      this.isActive = 0
    } else if (this.$route.name === 'goods') {
      this.isActive = 1
    } else if (this.$route.name === 'order') {
      this.isActive = 2
    }
  }
}
</script>

<style scoped>
  .logo{
    height: 100%;
    vertical-align: middle;
  }
  .el-header{
    height: 80px;
    background: #409EFF;
  }
  .name{
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    margin-left: 20px;
  }
  .el-aside{
    background: #909399;
    text-align: center;
  }
  .aside-list{
    line-height: 50px;
    color: #ffffff;
    cursor: pointer;
  }
  .active{
    color: #409EFF;
  }
</style>
